<template>
  <div>
     <div class="ff">
         <img class="jt" src="/static/dhw/dhw-5.png" alt="">
       <p class="zi">这都是"断货王"...</p>
       <img class="fx" src="/static/dhw/fenxiang20.png" alt="">
     </div>
    <div class="kuang">
    <img class="datu" src="/static/dhw/dhw-4.png" alt="">
    <div class="hua">
    <div class="hzp">
      <img class="x1" src="/static/dhw/dhw-3.png" alt="">
      <p>不易脱妆口红</p>
      <p class="y1">¥59</p>
       <div class="hx"></div>
      <p class="shengyu">还剩1000件</p>
      <p class="qiang">马上去抢</p>
    </div>
      <div class="xt"></div>
    <div class="zhushi">
      <router-link to="/spxq">
      <img class="x1" src="/static/dhw/dhw-2.png" alt="">
      </router-link>
      <p>不易脱妆口红</p>
      <p class="y1">¥88</p>
      <div class="hx"></div>
      <p class="shengyu">还剩1000件</p>
      <p class="qiang">马上去抢</p>
    </div>
      <div class="xt"></div>
    <div class="fuhao">
      <img class="x1"  src="/static/dhw/dhw-1.png" alt="">
      <p>不易脱妆口红</p>
      <p class="y1">¥129</p>
      <div class="hx"></div>
      <p class="shengyu">还剩1000件</p>
      <p class="qiang">马上去抢</p>
    </div>
    </div>
    </div>
    <div class="kuang">
    <img class="datu" src="/static/dhw/dhw-4.png" alt="">
    <div class="hua">
      <div class="hzp">
        <img class="x1" src="/static/dhw/dhw-3.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥59</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
      <div class="xt"></div>
      <div class="zhushi">
        <img class="x1" src="/static/dhw/dhw-2.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥88</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
      <div class="xt"></div>
      <div class="fuhao">
        <img class="x1"  src="/static/dhw/dhw-1.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥129</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
    </div>
    </div>
    <div class="kuang">
    <img class="datu" src="/static/dhw/dhw-4.png" alt="">
    <div class="hua">
      <div class="hzp">
        <img class="x1" src="/static/dhw/dhw-3.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥59</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
      <div class="xt"></div>
      <div class="zhushi">
        <img class="x1" src="/static/dhw/dhw-2.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥88</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
      <div class="xt"></div>
      <div class="fuhao">
        <img class="x1"  src="/static/dhw/dhw-1.png" alt="">
        <p>不易脱妆口红</p>
        <p class="y1">¥129</p>
        <div class="hx"></div>
        <p class="shengyu">还剩1000件</p>
        <p class="qiang">马上去抢</p>
      </div>
    </div>

    </div>
    <Tabbar></Tabbar>
  </div>

</template>

<script>
  import Tabbar from '../com/Tabbar'
    export default {
        name: "Dhw",
      components:{
        Tabbar
      }
    }
</script>

<style scoped>
  .ff{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 9.6rem;
    margin-bottom: 6rem;
    background: #e53e42;
  }

.zi{
  font-size: 4.8rem;
  color: #fff;
}
.jt{
  width: 2.2rem;
  height: 3.8rem;
}
.datu{
  width: 100%;
  height: 30rem;
}
.kuang{
  border: 1px solid #ccc;
  margin-bottom: 2.5rem;
}
  .hua{
    display:flex;
    justify-content: space-around;
    align-items: center;
    /*background: aqua;*/
  }
  .hua .y1{
    display:flex;
    justify-content: space-around;
    align-items: center;
  }
 .xt{
   width: 1px;
   height: 17.5rem;
   background: #ccc;
 }
.y1{
  color: #e53e42;
}
  .hx{
    width: 100%;
    height: 0.1rem;
    background: #ccc;
  }
.shengyu{
  margin: 11px 0px 9px 0px;
}
  .qiang{
    border-radius: 10px;
    background: #e53e42;
    margin-bottom: 1.6rem;
    color: #fff;
  }
</style>
